<template>

	<view class="patient">
		<view class="patientLeft">
			<view class="patients">
				<text>蒋峰</text>
				<text class="benren">本人</text>
			</view>
			<view class="patients1">
				<text>622***********0909</text>
			</view>
		</view>
		<view class="patientRight">
			<view class="iconfont icon-jiantou_zuoyouqiehuan qiehuan" @click="switchs"></view>
			<view class="qiewenzi">切换就诊人</view>
		</view>
	</view>
	<jzTankuang v-show="state1" @setState='stesta'></jzTankuang>
	<view class="cover" v-show="state"></view>

</template>

<script setup>
	import jzTankuang from '~@/components/feng/jiuzhenTankuang/jiuzhenTankuang.vue'
	import {
		ref,
		reactive,
		toRef
	} from 'vue'
	//弹框
	const state = ref(false)
	//遮盖层开关
	const state1 = ref(false)
	//切换就诊人
	const switchs = () => {
		state.value = ref(true)
		state1.value = ref(true)
	}
	//遮盖层开关
	const stesta = (v) => {
		state.value = v.value
		state1.value = v.value
	}
</script>

<style lang="scss">
	$top:30rpx;
	$btm:20rpx;

	//遮盖层
	.cover {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	.patient {
		display: flex;
		flex-direction: row;
		height: 120rpx;
		margin-top: $top;
		background-color: #f3f8ff;
		border: 1px solid #f2f2f2;
		justify-content: space-between;

		//就诊人左部分
		.patientLeft {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: $btm;

			.patients {
				margin-bottom: $btm;

				.benren {
					font-size: 12px;
					line-height: 50rpx;
					display: inline-block;
					width: 100rpx;
					margin-left: 15rpx;
					height: 50rpx;
					text-align: center;
					color: #7498ff;
					border-radius: 40%;
					background-color: #e0ecfe;
				}
			}

			.patients1 {
				font-size: 20rpx;
				color: #aaaaad;
			}
		}

		//就诊人右部分
		.patientRight {
			margin-right: $btm;
			text-align: center;
			border: 1px solid #f2f2f2;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.qiehuan {
				margin: 0 auto;
				display: inline-block;
				color: #fff;
				border-radius: 50%;
				width: 50rpx;
				line-height: 50rpx;
				height: 50rpx;
				background-color: #006eff;
				margin-bottom: $btm;
			}

			.qiewenzi {
				font-size: 20rpx;
				color: #8f9495;
			}
		}
	}
</style>
